<template>
  <view>
      <view class="address-box" v-if="JSON.stringify(address)==='{}'">
          <button type="primary" size="mini" class="btnAddress" @click="handlerBtn">请添加收货地址</button>
      </view>
      
      <view class="row-box" v-else @click="handlerBtn">
        <view class="row1">
          <view class="left">
            收货人:{{address.userName}}
          </view>
          <view class="right">
            <view class="">
              电话：{{address.telNumber}}
            </view>
                     <uni-icons type="arrowright" size="12"></uni-icons>
          </view>

        </view>
        <view class="row2">
          <view class="left">
            收货地址:
          </view>
          <view class="right">
            {{site}}
          </view>
        </view>
      </view>
      
    <image src="/static/cart_border@2x.png" class="imgHight"></image>
  </view>
</template>

<script>
  import {mapState,mapMutations,mapGetters} from "vuex"
  export default {
    name:"my-address",
    data() {
      return {
      };
    },
    methods:{
      ...mapMutations("m_user",['UpdateTheData']),
     async handlerBtn(){
        const [err,res]=await uni.chooseAddress().catch(err=>err)
        if(err===null && res.errMsg==="chooseAddress:ok"){
              // this.address=res
              // console.log(res)
              this.UpdateTheData(res)
        }
        // 用户选择取消授权
        if(err && (err.errMsg==="chooseAddress:fail cancel" || err.errMsg==="chooseAddress:fail authorize no response") ){
          console.log("需要重新授权")
            this.reAuth() //重新发起申请
        }
      },
      // 重新授权
     async reAuth(){
      const [err2,confirmRes]= await uni.showModal({
          content:"检测到您没有打开地址权限,是否去设置打开?",
          confirmText:"确定",
          cancelText:"取消"
        })
        if(err2) return
         if(confirmRes.cancel) return uni.$showmag("您取消了授权!",1000,"none")
         if(confirmRes.confirm) return uni.openSetting({
           success:(res)=>{
             console.log(res)
           }
         })
      }
    },
    computed:{
        ...mapState('m_user',['address']),
        ...mapGetters('m_user',['site']),
  
    }
  }
</script>

<style lang="scss">
.imgHight{
  display: block;
  width: 100%;
  height: 5px;
}
.address-box{
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
}
  .row-box{
    padding: 20px 10px;
    font-size: 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    .row1{
      display: flex;
      justify-content: space-between;
      margin: 20px 0;
      .right{
        display: flex;
        justify-content:  space-between;
      }
    }
    .row2{
      display: flex;

      .left{
       white-space: nowrap;
      }
      .right{
          text-align:justify;
      }
    }
  }
</style>
